<!--
 * new page
 * @author: sunYihui
 * @since: 2024-09-12
 * administrator.vue
-->
<template>
    <el-dialog v-model="dialogVisible" :title="form.id ? '修改房间信息' : '新增房间'" width="700" :before-close="handleClose"
        align-center>
        <template #footer>
            <div class="dialog-footer">

                <el-form ref="ruleFormRef" :rules="rules" :model="form" label-width="auto" style="max-width: 600px">
                    <!-- {{ form }} -->
                    <el-form-item label="楼栋：" prop="buildingid">
                        <building style="width: 100%;height: 40px;" @change="(e) => buildingChange(e, form)"
                            :default-value="form.buildingid" :checkStrictly="false"></building>
                    </el-form-item>
                    <el-form-item label="房间号：" prop="houseno">
                        <el-input size="large" v-model="form.houseno" />
                    </el-form-item>
                    <el-form-item label="房间面积：" prop="areas">
                        <el-input size="large" v-model="form.areas" />
                    </el-form-item>
                    <el-form-item label="房间类型：" prop="typeA">
                        <el-select  clearable v-model="form.typeA" style="width: 40%;height: 40px;" placeholder="请选择朝向">
                            <el-option label="1室" value="1室" />
                            <el-option label="2室" value="2室" />
                            <el-option label="3室" value="3室" />
                            <el-option label="4室" value="4室" />
                            <el-option label="5室" value="5室" />
                            <el-option label="6室" value="6室" />
                            <el-option label="7室" value="7室" />
                            <el-option label="8室" value="8室" />
                        </el-select>

                        <el-select clearable v-model="form.typeB" style="width: 40%;height: 40px;" placeholder="请选择朝向">
                            <el-option label="1厅" value="1厅" />
                            <el-option label="2厅" value="2厅" />
                            <el-option label="3厅" value="3厅" />
                            <el-option label="4厅" value="4厅" />
                            <el-option label="5厅" value="5厅" />
                            <el-option label="6厅" value="6厅" />
                            <el-option label="7厅" value="7厅" />
                            <el-option label="8厅" value="8厅" />
                        </el-select>
                 
                    </el-form-item>
                    <el-form-item label="房间朝向：" prop="orientation">
                        <el-select clearable v-model="form.orientation" style="width: 100%;height: 40px;" placeholder="请选择朝向">
                            <el-option label="朝东" value="朝东" />
                            <el-option label="朝西" value="朝西" />
                            <el-option label="朝南" value="朝南" />
                            <el-option label="朝北" value="朝北" />
                            <el-option label="东南" value="东南" />
                            <el-option label="西南" value="西南" />
                            <el-option label="东北" value="东北" />
                            <el-option label="西北" value="西北" />
                        </el-select>
                    </el-form-item>
                    <el-form-item class="btn">
                        <el-button @click="handleClose">取消</el-button>
                        <el-button type="primary" @click="submit">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import building from '../../components/building/Buildings.vue'
import { add } from '../../service/house/house';
import type { FormInstance, FormRules } from 'element-plus'
import { reactive, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus';

const emits = defineEmits(["close"])

let dialogVisible = ref(true)
const handleClose = () => {
    emits("close");
}

const buildingChange = (e: any, params: any) => {
    console.log(999, e);
    params.buildingid = e;
}


const props = withDefaults(defineProps<RuleForm>(), {
    id: null,
    buildingid: null,
    houseno: '',
    areas: null,
    type: '',
    typeA: '',
    typeB: '',
    orientation: ""
})


interface RuleForm {
    id: number | null
    buildingid: number | null
    houseno: string
    areas: number | null
    type: string
    typeA: string,
    typeB: string,
    orientation: string
}


const form = reactive<RuleForm>({
    id: null,
    buildingid: null,
    houseno: '',
    areas: null,
    type: '',
    typeA: '',
    typeB: '',
    orientation: ""
})
const ruleFormRef = ref<FormInstance>()

//提交加表单验证
const submit = async () => {
    await ruleFormRef.value?.validate(async (valid) => {
        if (valid) {
            console.log(333);
            onSubmit()
        }
    })
}

const onSubmit = async () => {
    form.type= form.typeA + form.typeB
    //调用添加方法
    let res: any = await add(form)
    console.log(res);
    if (res.errCode === 10000) {
        ElMessage.success("添加成功")
        emits("close", true);
    } else {
        ElMessage.error(res.errMsg)
    }
}


//添加相关


const rules = reactive<FormRules<RuleForm>>({
    buildingid: [
        { required: true, message: '账号不能为空请选择楼栋', trigger: 'blur' },
    ],
    houseno: [
        { required: true, message: '请输入房间号', trigger: 'blur' },
    ],
    areas: [
        { required: true, message: '请输入房间面积', trigger: 'blur' },
    ],
    type: [
        { required: true, message: '请选择房间类型', trigger: 'blur' },
    ],
    orientation: [
        { required: true, message: '请选择房间朝向', trigger: 'blur' },
    ]
})




onMounted(() => {
    Object.assign(form, props)
    form.typeA = form.type.slice(0, 2)
    form.typeB = form.type.slice(2)

})

</script>

<style scoped lang="less">
.dialog-footer {
    display: flex;
    justify-content: center;

    .btn {
        width: 600px;
        margin: 0 20px;
        display: flex;
        flex-direction: column;
        align-content: flex-end;
        margin: 20px 0;

        el-button {
            height: 36px;
        }
    }
}

/deep/.el-cascader .el-input {
    height: 40px;
}
</style>